<template>
  <view class="container">
    <!-- 自定义头部 -->
    <BhTitle titleText="我的" showRetIcon="false"></BhTitle>

    <view class="header">
      <view v-if="modifyNickName" class="msg  bh-row bh-justify-space-between">
        温馨提示：为了您的使用体验，建议尽快修改昵称哦
        <!-- @click="tips = false" -->
        <!-- <image class="redclose" src="../../static/images/redclose.png" mode="" ></image> -->
      </view>
      <view class="header-top">
        <image @click="navToPage('/pages/my/my_edit')" class="avatar" :src="sessionDto.userDto.avatarUrl" mode="scaleToFill" />
        <view @click="navToPage('/pages/my/my_edit')" class="nickname-wrap">
          <view class="nickname bh-col bh-justify-space-between bh-align-start">
            <view class="nickname-name fw600">
              <text>{{ sessionDto.userDto.nickName }}</text>
			  <image v-if="isMember" style="width:36rpx;height: 36rpx;padding-left: 4rpx;padding-top: 8rpx;"
			  	src="@/static/images/member/member_flg.svg"></image>
            </view>
            <view v-if="sessionDto.postNumber > 0" class="nickname-label">
              <image class="label-icon" src="../../static/images/detail/renzheng.svg" mode="scaleToFill" />
              <view class="label-title">店主认证</view>
            </view>
          </view>
          <view class="nickname-arrow-wrap">
            <image src="../../static/images/my_right_arrow.svg" mode="scaleToFill" class="nickname-arrow" />
          </view>
        </view>
      </view>
      <view class="header-bottom">
        <view class="collect-wrap" @click="() => { navToPage('/PostPage/post_list_my_collect/post_list_my_collect') }">
          <view class="collect-value">{{ sessionDto.metricRecordDtoMap.collectNumber }}</view>
          <view class="collect-title">收藏</view>
        </view>
        <view class="collect-wrap" @click="() => { navToPage('/PostPage/post_list_my_scan/post_list_my_scan') }">
          <view class="collect-value">{{ sessionDto.metricRecordDtoMap.viewNumber }}</view>
          <view class="collect-title">我的浏览</view>
        </view>
        <view class="collect-wrap" @click="() => { navToPage('/PostPage/post_list_my_manage_buy/post_list_my_manage_buy') }">
          <view class="collect-value">{{ sessionDto.postBuyNumber }}</view>
          <view class="collect-title">找铺发布</view>
        </view>
      </view>
    </view>
    <view class="body-container">

      <view class="body-item" @click="() => { navToPage('/PostPage/post_list_my_manage_sell/post_list_my_manage_sell') }">
        <image class="prefix-icon" src="../../static/images/my/my_pub.svg"></image>
        <view class="body-title">发布店铺</view>
        <view class="sufix-wrap">
          <view class="sufix-content">{{ sessionDto.postNumber }}</view>
        </view>
      </view>
      <view class="body-item" @click="clickBeenAddViewNumber">
        <view style="position: relative;">
          <image class="prefix-icon" src="../../static/images/my/my_add_scan.svg"></image>
          <view v-if="beenAddViewNumber" class="prefix-icon-tip"></view>
        </view>

        <view class="body-title">新增曝光</view>
        <view class="sufix-wrap">
          <view class="sufix-content">{{ sessionDto.metricRecordDtoMap.beenViewNumber }}</view>
        </view>
      </view>
      <view class="body-item" @click="clickBeenCollectNumber">
        <view style="position: relative;">
          <image class="prefix-icon" src="../../static/images/my/my_add_collect.svg"></image>
        </view>
        <view class="body-title">新增收藏</view>
        <view class="sufix-wrap">
          <view class="sufix-content">
            {{ sessionDto.metricRecordDtoMap.beenCollectNumber }}
            <text v-if="sessionDto.metricRecordDtoMap.beenAddCollectNumber > 0" class="prefix-icon-tip-new">+{{ sessionDto.metricRecordDtoMap.beenAddCollectNumber }}</text>
          </view>
        </view>
      </view>
	  <view class="body-item" @click="clickMember">
	    <view style="position: relative;">
	      <image class="prefix-icon" src="../../static/images/my/my_add_collect.svg"></image>
	    </view>
	    <view class="body-title">我的会员</view>
	    <view class="sufix-wrap">
	      <view class="sufix-content">
	      </view>
	    </view>
	  </view>
      <view v-if="sessionDto.userDto.mgr == 1" @click="navToPage('/PostPage/post_list_audit/post_list_audit_new')" class="body-item">
        <image class="prefix-icon" src="../../static/images/my/my_add_collect.svg"></image>
        <view class="body-title">待审批</view>
        <view class="sufix-wrap">
          <view class="sufix-content">0</view>
        </view>
      </view>
      <view v-if="sessionDto.userDto.mgr == 1" @click="navToPage('/PostPage/fake/fake_manage')" class="body-item">
        <image class="prefix-icon" src="../../static/images/my/my_add_collect.svg"></image>
        <view class="body-title">平台数据管理</view>
        <view class="sufix-wrap">
          <view class="sufix-content">0</view>
        </view>
      </view>
    </view>
    <view class="body-container">
      <view class="body-item">
        <image class="prefix-icon" src="../../static/images/my/my_contact.svg"></image>
        <!-- <view class="body-title">联系客服</view> -->
        <button class="body-title contact" open-type="contact">联系客服</button>
        <view class="sufix-wrap">
          <view class="sufix-content"></view>
        </view>
      </view>
      <view class="body-item">
        <image class="prefix-icon" src="../../static/images/post_add/post_add_aboutme.svg"></image>
        <view @click="navToPage('/pages/my/about_us')" class="body-title">关于我们</view>
        <view class="sufix-wrap">
          <view class="sufix-content"></view>
        </view>
      </view>
      <!-- <view @click="navToPage('/pages/my/info_privacy')" class="body-item">
        <image class="prefix-icon" src="../../static/images/post_add/post_add_aboutme.svg"></image>
        <view class="body-title">隐私政策</view>
        <view class="sufix-wrap">
          <view class="sufix-content"></view>
        </view>
      </view> -->
      <view class="body-item">
        <image class="prefix-icon" src="../../static/images/my/my_message.svg"></image>
        <view class="body-title">我的消息</view>
        <view @click="navToPage('/TUIKit/components/TUIConversation/index')" class="sufix-wrap" style="flex: 1;text-align: right;">
        <!-- <view @click="navToPage('/pages/post_list_my_message/post_list_my_message')" class="sufix-wrap" style="flex: 1;text-align: right;"> -->
          <view class="sufix-holder">您有新的未读消息
            <text v-if="sessionDto.unreadCommentNumber > 0" style="color: #ff3b3b">+{{ sessionDto.unreadCommentNumber }}</text>
            <text v-else>{{ sessionDto.unreadCommentNumber }}</text>
          </view>
        </view>
      </view>
	  
    </view>
	<view style="height: 100rpx;">
	</view>
    <show-add-post-sheet :show="showPostAdd1" @close="showPostAdd1 = false"></show-add-post-sheet>
    <!-- 底部导航 -->
    <BhTabbarfooternew :showRetIcon=false current="2" :message-count="messageCount()" @change-footer-tab="onChangeFooterTab"></BhTabbarfooternew>

    <show-custom-model></show-custom-model>
  </view>
</template>

<script>
import {
  Api
} from '../../api/api';
import {
  Dict
} from '../../components/custom_views/dict';
import BhTabbarfooternew from '../../components/custom_views/bh-tabbarfooternew.vue';

import showAddPostSheet from '../../components/custom_views/show-add-post-sheet.vue';
import {
  commonMixin
} from '../../components/custom_views/mixin';
import BhTitle from '../../components/custom_views/bh-title.vue'

import {
  CustomDate
} from '../../components/custom_views/custom_date'

export default {
  components: {
    BhTabbarfooternew,
    showAddPostSheet,
    BhTitle
  },
  mixins: [commonMixin],
  data() {
    return {
      sessionDto: this.$store.state.sessionDto,
      showPostAdd1: false,
    }
  },
  computed: {
		  
	  isMember(){
		  return this.$store.state.sessionDto.userDto.memberLevel == 1801 && 
		  CustomDate.calSecondsFromDate(this.$store.state.sessionDto.userDto.memberExpireDate) < 0
	  },
    userRoleName() {
      if (this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
        // todo 转店铺的角色
        return '切换找铺';
      } else if (userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
        // todo 找店铺的角色
        return '切换转铺';
      }
    },
    isSell() {
      return this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
    },
    isBuy() {
      return this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value
    },
    beenAddViewNumber() {
      let clickedBeenAddViewNumber = uni.getStorageSync('clickedBeenAddViewNumber')
      let now = CustomDate.formatCurrentDate('yyyy-MM-dd')
      if (clickedBeenAddViewNumber == now) {
        console.log('当日已经点击过')
        return false
      } else {
        return this.sessionDto.metricRecordDtoMap.beenAddViewNumber > 0
      }
    },
    modifyNickName() {
      if (this.$store.state.sessionDto.userDto.nickName && (this.$store.state.sessionDto.userDto.nickName.startsWith('Bh') || 
      this.$store.state.sessionDto.userDto.nickName.startsWith('lpd'))) {
        return true
      } else {
        return false
      }
    }
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    console.log('页面参数', options)
    this.initApiData(options)
    let capsule = this.capsule = uni.getMenuButtonBoundingClientRect()
    console.log(capsule)
    this.titleHeight = capsule.height + 10 + capsule.top
    // if(this.$sore.state.sessionDto.userDto.nickName.startWith('Bh')){
    //   this.showCustomModel({

    //   })
    // }
    // uni.navigateTo({
    //   url: '/pages/post_add_sell/post_add_sell'
    // })
  },
  methods: {
	  
	  navToConversationList(){
		  Api.CustRequestSubscribeMessage(
		  	() => {
		  uni.navigateTo({
		  	url: '/TUIKit/components/TUIConversation/index'
		  })
		  	},
		  	() => {
		  uni.navigateTo({
		  	url: '/TUIKit/components/TUIConversation/index'
		  })
		  	}
		  )
		  
	  },

    clickBeenCollectNumber() {
      this.sessionDto.metricRecordDtoMap.beenAddCollectNumber = -1
      this.navToPage('/PostPage/post_list_my_collect/post_list_other_collect?tabIndex=1')
    },
	clickMember(){
		this.navToPage('/MemberPage/member_index/member_index')
	},
    /**
     * 点击我的曝光
     */
    clickBeenAddViewNumber() {
      let now = CustomDate.formatCurrentDate('yyyy-MM-dd')
      uni.setStorageSync('clickedBeenAddViewNumber', now)
      this.sessionDto.metricRecordDtoMap.beenAddViewNumber = -1
      // @click="navToPage('/pages/post_list_my_collect/post_list_other_collect?tabIndex=1')"
      this.navToPage('/PostPage/post_list_my_collect/post_list_other_collect')
      // this.navToPage('/pages/post_list_my_scan/post_list_other_scan')
    },

    initApiData(options) {
      console.log('页面参数1', options)
      let that = this
      // /** todo 优选店铺列表 */
      // Api.PostSellApi.listOfHighQuality(that, (res) => { })
      // // /** todo 最新求租列表 */
      // Api.PostBuyApi.listOfLatest(that, {}, (res) => {
      //   // todo
      // })

    },
    onChangeFooterTab(footerTab) {
      console.log('点击的footer信息', footerTab)
      if (footerTab.index == 1) {
        this.showPostAdd1 = true
      } else if (footerTab.index == 0) {
        uni.redirectTo({
          url: '/pages/home/home'
        })
      }
    },
    chooseCancel() {
      this.showPostAdd1 = false;
    },
  },
  watch: {},
  onPullDownRefresh() {
    this.initApiData({})
  },

  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
}

.header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 28%);

  .msg {
    font-size: 24rpx;
    color: #F87147;
    padding: 0 32rpx;
    background-color: rgba(248, 113, 71, 0.1);
    height: 72rpx;
    line-height: 72rpx;
  }

  .header-top {
    display: flex;
    flex-direction: row;
    padding-top: 58rpx;
    padding-left: 64rpx;
    padding-right: 64rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .nickname-wrap {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-left: 32rpx;

      .nickname {


        .nickname-name {
          font-size: 36rpx;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 15rpx;
		  display: flex;
		  align-items: center;
        }

        .nickname-label {
          border-radius: 200rpx;
          box-sizing: border-box;
          height: 32rpx;
          border: 2rpx solid #F87147;
          width: 128rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          .label-icon {
            display: block;
            width: 16.7rpx;
            height: 16rpx;

          }

          .label-title {
            font-size: 20rpx;
            color: #F87147;
            margin-left: 2.5rpx;
          }
        }
      }

    }

    .nickname-arrow-wrap {
      width: 70rpx;
      height: 70rpx;
      text-align: right;
      padding-top: 32rpx;

      .nickname-arrow {
        width: 16rpx;
        height: 26rpx;
      }
    }
  }

  .header-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 80rpx;
    padding-right: 80rpx;
    margin-top: 64rpx;
    padding-bottom: 32rpx;

    .collect-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .collect-value {
        font-size: 40rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 28rpx;
      }

      .collect-title {
        font-size: 28rpx;
        font-weight: normal;

        color: #9E9E9E;
      }
    }
  }
}
button::after{
  content: '';
  border: none;
}

.body-container {
  background-color: white;
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  padding-left: 68rpx;
  padding-right: 56rpx;

  .body-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 26rpx;
    padding-bottom: 26rpx;

    .prefix-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 29rpx;
    }

    .prefix-icon-tip {
      position: absolute;
      top: 0px;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      left: 40rpx;
      top: -8rpx;
      opacity: 1;
      background: #EF2D2D;
    }

    .prefix-icon-tip-new {
      top: 0px;
      padding-left: 5rpx;
      padding-right: 5rpx;
      border-radius: 50%;
      opacity: 1;
      font-size: 24rpx;
      color: #ff3b3b;
      font-size: 28rpx;
      font-weight: 600;
    }

    .body-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      flex: 1;
    }

    .contact {
      background-color: transparent;
      border-radius: 0rpx;
      box-sizing: inherit;
      line-height: normal;
      padding: 0;
      margin: 0;
      padding-left: 0;
      padding-right: 0;
      text-align: left;
      border: none;
      border: 0px solid red;
    }

    .contactbutton::after {
      content: ''
    }

    .sufix-wrap {
      width: 90rpx;
      text-align: right;

      .sufix-content {
        font-size: 28rpx;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.85);
      }

      .sufix-holder {
        font-size: 24rpx;

        color: #999999;
      }
    }
  }
}</style>